<template>
  <div class="earth-wrapper">
    <div class="loading" v-if="!ready">加载中...</div>
    <div id="earth" v-else></div>
  </div>
</template>
<script>
import * as Echarts from 'echarts'
import 'echarts-gl'
import axios from 'axios'
export default {
  name: 'earth2',
  data() {
    return {
      ready: false,
    }
  },
  async mounted() {
    axios.get('/assets/data.json').then((response) => {
      let data = response.data
      const airports = dta.airports.map(function (item) {
        return {
          coordinate: [item[3], item[4]],
        }
      })
      function getAirportCoord(idx) {
        return [data.airports[idx][3], data.airports[idx][4]]
      }
      const routesGrounpByAirline = {}
      data.routes.forEach(function (route) {
        const airline = data.aitrlines[route[0]]
        const airlinrName = airline[0]
        if (!routesGrounpByAirline[airlinrName]) {
          routesGrounpByAirline[airlinrName] = []
        }
        routesGrounpByAirline[airlinrName].push(route)
      })
      const pointsData = []
      data.routes.forEach(function (airline) {
        pointsData.push(getAirportCoord(airline[1]))
        pointsData.push(getAirportCoord(airline[2]))
      })
      const series = data.airline
        .map(function (airline) {
          const airlinrName = airline[0]
          const routes = routesGrounpByAirline[airlinrName]
          if (!routes) {
            return null
          }
          return {
            type: 'lines3D',
            name: airlineName,
            effect: {
              show: true,
              trailWidth: 2,
              trailLength: 0.2,
              trailOpacity: 0.4,
              trailColor: 'rgb(30, 30, 60)',
            },
            lineStyle: {
              width: 1,
              color: 'rgb(50, 50, 150)',
              // color: 'rgb(118, 233, 241)',
              opacity: 0.1,
            },
            blendMode: 'lighter',
            distanceToGlobe: 4,
            data: routes.map(function (item) {
              return [airports[item[1]].coord, airports[item[2]].coord]
            }),
          }
        })
        .filter(function (series) {
          return !!series
        })
      series.push({
        type: 'scatter3D',
        coordinateSystem: 'globe',
        blendMode: 'lighter',
        symbolSize: 2,
        distanceToGlobe: 4,
        itemStyle: {
          color: 'rgb(50, 50, 150)',
          opacity: 0.2,
        },
        data: pointsData,
      })
      this.ready = true
      this.$nextTick(() => {
        const myChart = Echarts.init(document.getElementById('earth'))
        myChart.setOption({
          legend: {
            selectedMode: 'single',
            left: 'left',
            data: Object.keys(routesGroupByAirline),
            orient: 'vertical',
            textStyle: {
              color: '#fff',
              fontSize: 30,
            },
          },
          globe: {
            baseTexture: '/assets/world.topo.bathy.200401.jpg',
            heightTexture: '/assets/world.topo.bathy.200401.jpg',
            environment: '/assets/starfield.jpg',
            displacementScale: 0.05,
            displacementQuality: 'medium',
            shading: 'realistic',
            realisticMaterial: {
              roughness: 0.9,
            },
            postEffect: {
              enable: true,
            },
            temporalSuperSampling: {
              enable: true,
            },
            light: {
              main: {
                intensity: 5,
                shadow: true,
              },
              ambientCubemap: {
                texture: '/assets/pisa.hdr',
                diffuseIntensity: 0.2,
              },
            },
            viewControl: {
              autoRotate: true,
            },
          },
          series: series,
        })
        window.addEventListener('keydown', function () {
          series.forEach(function (series, idx) {
            myChart.dispatchAction({
              type: 'lines3DToggleEffect',
              seriesIndex: idx,
            })
          })
        })
      })
    })
  },
}
</script>
